<template>
    <div>
        <div class="drawer-panel">
            <div class="search-item">
                <el-input
                        size="small"
                        v-model="queryParams.username"
                        class="input-width clear-input"
                        suffix-icon="el-icon-search"
                        clearable
                        placeholder="请输入查询内容"
                ></el-input>
            </div>
            <div class="search-item">
                <el-button type="primary" size="mini"  @click="queryUserList">搜索</el-button>
                <el-button type="primary" size="mini"  @click="addUser">添加</el-button>
                <el-button type="primary" size="mini"  @click="removeUserList">移除</el-button>
            </div>
        </div>

        <div style="padding:20px">
            <el-table
                    :data="tableData"
                    size="small"
                    border
                    :row-style="{height:'0'}"
                    style="width: 100%"
                    height="calc(100vh - 250px)"
                    ref="multipleTable"
                    @selection-change="userHandleSelectionChange"
                    v-loading="loading">
                <el-table-column
                        v-for="(item,index) in fields"
                        :key="index"
                        :type="item.type"
                        :label="item.label"
                        :prop="item.prop"
                        :min-width="item.width"
                        :fixed="item.fixed"
                >
                    <template v-if="item.prop === 'operation'" scope="scope">
                        <el-button @click="removeUser(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
                
            </el-table>
            <div class="page-container" style="float:right">
                <el-pagination
                        :page-sizes="[10, 20, 30, 50]"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="nowPage"
                        :page-size="10"
                        layout="sizes,total, prev, pager, next"
                        :total="total">
                </el-pagination>
            </div>

            <relateUserAdd ref="relateUserAdd" @success="queryUserList('init')"/>
        </div>

        
    </div>
</template>

<script>

    import relateUserAdd  from "./RelateUserAdd";
    import {getUserListByRoleCode,relateUser,removeRelateUser,removeRelateUserList} from '@/api/role';
    export default {
        components:{
            relateUserAdd,
        },
        data(){
            return {
                total: 0,
                loading: false,
                nowPage:1,
                queryParams:{
                    pageNum:1,
                    pageSize:10,
                    username:"",
                    roleCode:""
                },
                fields:[
                    {
                      type:"selection",
                      width:55
                    },
                    {
                        label:"用户账号",
                        prop:"userAccount",
                        width:100
                    },{
                        label:"用户名称",
                        prop:"username",
                        width:80
                    },{
                        label:"用户昵称",
                        prop:"nickName",
                        width:80
                    },{
                        label:"所属部门",
                        prop:"deptNo",
                        width:80
                    },{
                        label:"操作",
                        prop:"operation",
                        width:100,
                        fixed: "right",
                    }
                ],
                tableData: [],
                selectedRelateIds:[],
            }
        },
        created(){

        },
        methods:{
            show(rowCode){
                this.selectedRelateIds = [];
                this.queryParams.roleCode = rowCode;
                this.queryUserList();
            },
            async queryUserList(){
                this.loading = true;
                let res = await getUserListByRoleCode(this.queryParams);
                let content = res.data;
                this.total = content.total;
                this.tableData = content.list;
                this.loading = false;
            },
            addUser(){
                 this.$refs["relateUserAdd"].showDialog(this.queryParams.roleCode);
            },
            userHandleSelectionChange(row){
              let select = [];
              for(let i = 0; i < row.length; i++){
                select.push(row[i].relateId);
              }
              this.selectedRelateIds = select;
            },
            removeUserList(){
              this.$confirm('您是否要删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(async () => {
                let res = await removeRelateUserList(this.selectedRelateIds);
                this.queryUserList();
              }).catch(() => {
              });
            },
            removeUser(row){
                this.$confirm('您是否要删除该用户?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await removeRelateUser({relateId:row.relateId});
                    this.queryUserList();
                }).catch(() => {
                });
            },
            handleSizeChange(val) {
                this.queryParams.limit = val;
            },
            handleCurrentChange(val) {
                this.queryParams.pageNum = val;
            },
        }
    }
</script>
<style lang="scss" scoped>
    .drawer-panel{
        padding-left: 20px;
        padding-right: 20px;
    }
    .btn-group{
        display: flex;
        justify-content: right;
        .el-button{
            width: 50px;
        }
    }
    .el-form-item{
        height: 40px;
    }
     .search-item{
        float: left;
        margin: 0 10px 10px 0;
        span{
            color: #606266;
            font-size: 14px;
            margin-right: 0px;
        }
    }
</style>